import React, { useState, useRef, useEffect } from 'react';
import { Card, Row, Space, Menu, Button, Col, Tooltip, Dropdown, Modal, Input, notification } from 'antd'
import { connect, history } from 'umi'
import { ChromeOutlined, SettingOutlined } from '@ant-design/icons'
import { KeepAlive, useAliveController, AliveScope } from 'react-activation';
import { setString } from '@/utils/utils'
import Answer from './components/Answer';
import './index.less';
const AnsweringItem = (props) => {
    const { val, dispatch, organizationUserId, setData } = props
    const { title } = val
    return <Tooltip placement="right" title={title}>
        <div onClick={() => {
            setData(val)
        }} className='AnsweringAis_flowautoData font_hide'>
            {title}
        </div>
    </Tooltip>
}
const AnsweringItemSelect = (props) => {
    const [editFlag, setEditFlag] = useState(false)
    const { val, dispatch, reload } = props
    const { title } = val
    const items = [
        {
            key: '1',
            label: <Button onClick={() => { setEditFlag(true) }} type='link'>重命名</Button>,
        },
        {
            key: '2',
            label: <Button onClick={() => {
                Modal.confirm({
                    title: '确认删除',
                    content: '是否要删除搜索问题',
                    okText: '删除',
                    cancelText: '取消',
                    onOk() {
                        dispatch({
                            type: 'answering/fakeAnalysisRemoveChatTitle',
                            payload: {
                                id: val.id
                            },
                            callback: () => {
                                reload()
                            }
                        })
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                })
            }} type='link'>删除</Button>,
        },

    ];
    const reRame = (e) => {
        dispatch({
            type: 'answering/fakeAnalysisRenameChatTitle',
            payload: {
                id: val.id,
                title: e.target.value,
            },
            callback: () => {
                setEditFlag(false)
                reload()
            }
        })
    }
    return <Space>
        <div className='AnsweringAis_flowautoData AnsweringAis_flowautoColor2 font_hide'>
            {editFlag === true ? <Input
                onPressEnter={(e) => {
                    reRame(e)
                }}
                defaultValue={title}></Input> : <Space>
                <Tooltip placement="right" title={title}>
                    <div className='font_hide' style={{ width: 180 }}>
                        {title}
                    </div>
                </Tooltip>
                <Dropdown
                    menu={{
                        items,
                    }}
                    placement="bottomLeft"
                >
                    <SettingOutlined></SettingOutlined>
                </Dropdown>

            </Space>}
        </div>

    </Space>



}
const AnsweringAi = (props) => {
    const { dispatch, loading, children, } = props
    const { location } = history
    const { pathname, query } = location;
    const { onlyId = '', organizationUserId } = query
    useEffect(() => {
        fetchData()
    }, [])
    const [list, setList] = useState([])
    const [data, setData] = useState({})
    const fetchData = () => {
        dispatch({
            type: 'answering/fetchAnalysisMyChatTitle',
            payload: {
                organizationUserId
            },
            callback: (e) => {
                setList(e)
                if (e.length > 0 && !data.id) {
                    const { chatTitleList = []
                    } = e[0]
                    setData(chatTitleList[0])
                }
            }
        })
    }
    console.log(data)
    return (
        <div className='AnsweringAis_box'>
            <div className='AnsweringAis_left_box'>
                <div className='AnsweringAis_left_content'>
                    <div className='AnsweringAis_left_title'>
                        学管家AI助手
                    </div>
                    <div className='AnsweringAis_left_btn'>
                        {/* <div onClick={() => {
                        notification.warning({
                            message: '温馨提示',
                            description: '暂不支持',
                        });
                        // dispatch({
                        //     type: 'answering/save',
                        //     payload: {
                        //         aiChatData: {}
                        //     },
                        // })
                        // history.push({
                        //     pathname: '/answerUsers/askUser',
                        //     query: {

                        //     }
                        // })
                    }} className='AnsweringAis_left_btnStyle'>
                        <div className='AnsweringAis_left_btn1'>
                            <div className='AnsweringAis_icon_style'>
                                <ChromeOutlined></ChromeOutlined>
                            </div>

                            开启新对话
                        </div>
                    </div> */}
                    </div>
                    <div className='AnsweringAis_flowauto'>
                        {list.map((item, index) => {
                            const {
                                time,
                                chatTitleList
                            } = item
                            return <div key={index} className='AnsweringAis_flowautoItem'>
                                <div className='AnsweringAis_flowautoDate'>
                                    {time}
                                </div>
                                {chatTitleList.map((val, o) => {
                                    const { title } = val
                                    if (data.id == val.id) {
                                        return <AnsweringItemSelect organizationUserId={organizationUserId} key={o} reload={fetchData} val={val} dispatch={dispatch} data={data}></AnsweringItemSelect>
                                    }
                                    return <AnsweringItem setData={setData} organizationUserId={organizationUserId} key={o} val={val} dispatch={dispatch} data={data}></AnsweringItem>
                                })}
                            </div>
                        })}
                    </div>
                </div>
            </div>
            <div className='AnsweringAis_left_rightBox'>
                <Answer data={data}></Answer>
            </div>
        </div>
    );
};

export default connect(({ loading, answering }) => ({
    loading: loading.models.answering,
}))(AnsweringAi);

